<template>
  <div class="bar-chart-06 chart" ref="barChart06"></div>
</template>

<script setup>
import { ref, onMounted, inject } from 'vue';
const barChart06 = ref(null);
const echarts = inject('$echarts');

let yAxisData = ['圆融星座', '时代广场', '2.5产业园', 'A邻里中心', 'B邻里中心'];
let seriesData = [236, 125, 110, 102, 99];
let totalData = [500, 360, 370, 513, 294];
let max = Math.max.apply(null, totalData);
let getMax = [];
for (let i = 0; i < yAxisData.length; i++) {
  getMax.push(max);
}

const option = {
  backgroundColor: '#03171E',
  compCode: 'C202310037',
  grid: {
    top: '10px',
    left: '5%',
    right: '10%',
    bottom: '5%',
    containLabel: true,
  },
  tooltip: {
    show: true,
    backgroundColor: '#053962', // 设置背景色为半透明红色
    borderColor: '#165e9e', // 设置边框颜色
    borderWidth: 1,
    textStyle: {
      color: '#fff'
    },
    formatter: `昨日周转率{c0}`,
  },
  yAxis: [
    {
      type: 'category',
      inverse: true,
      data: yAxisData,
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        fontSize: 15,
        textStyle: {
          color: "#fff",
        },
      },
    },
    {
      type: "category",
      inverse: true,
      offset: -50,
      axisTick: "none",
      axisLine: "none",
      show: true,
      axisLabel: {
        textStyle: {
          color: "#ffffff",
          fontSize: "16",
        },
        formatter(val) {
          const index = seriesData.findIndex(ele => ele == val);
          if (index >= 0) {
            return `${val}/${totalData[index]}`
          } else {
            val
          }
        },
      },
      data: seriesData,

    },

  ],
  xAxis: {
    type: 'value',
    show: false,
  },
  series: [
    {
      name: "背景",
      type: "bar",
      barWidth: 10,
      barGap: "-100%",
      data: getMax,
      itemStyle: {
        normal: {
          color: "rgba(24,31,68,1)",
          barBorderRadius: 20,
        },
      },
    },
    {
      data: seriesData,
      type: 'bar',
      barWidth: 10,
      zlevel: 1,
      itemStyle: {
        barBorderRadius: 20,
        //柱体的颜色
        //右，下，左，上（1，0，0，0）表示从正右开始向左渐变
        color: function (params) {
          let colorList = [
            ['rgba(62, 255, 232, 0)', 'rgba(62, 255, 232, 1)'],
            ['rgba(62, 185, 255, 0)', 'rgba(62, 185, 255, 1)'],
            ['rgba(255, 156, 93, 0)', 'rgba(255, 156, 93, 1)'],
            ['rgba(172, 182, 185,0)', 'rgba(172, 182, 185,1)'],
            ['rgba(172, 182, 185,0)', 'rgba(172, 182, 185,1)'],
          ]
          let colorItem = colorList[params.dataIndex]
          if (colorItem) {
            return new echarts.graphic.LinearGradient(
              0,
              0,
              1,
              0,
              [
                {
                  offset: 0,
                  color: colorItem[0],
                },
                {
                  offset: 1,
                  color: colorItem[1],
                },
              ],
              false
            )
          } else {
            return 'rgba(62, 255, 232, 1)'
          }
        },
      },
    },
  ],
}


onMounted(() => {
  const chart = echarts.init(barChart06.value);
  chart.setOption(option);
});

</script>

<style scoped></style>
